<!-- 公告详情页面 -->
<template>
    <view class="">
        <!-- 标题布局 -->
        <view class="box-title box-flex-center">
            <view class="">
                <uni-tag text="置顶" type="error" inverted></uni-tag>
            </view>
            <view class="box-title-content">{{title}}</view>
        </view>
        <!-- 标签布局 -->
        <view class="box-tag box-flex-center">
            <view>阿狸</view>
            <view class="box-tag-date">2024年1月1日</view>
        </view>
        <!-- 内容布局 -->
        <view class="box-content">
            <rich-text
                nodes="<div><p>本小程序仅作为测试使用。</p><p><img src='https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png'></img></p></div>"></rich-text>
        </view>
        <!-- 阅读量布局 -->
        <view class="box-count">
            <uni-icons type="eye" size="30"></uni-icons>
            <view>1</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from "vue";
    import { onLoad } from "@dcloudio/uni-app";

    let id = ref("");
    let title = ref("");

    //页面生命周期
    //页面加载
    onLoad((e) => {
        let { id: eId = "", title: eTitle = "" } = e;
        id.value = eId;
        title.value = eTitle;
    });
</script>

<style lang="scss" scoped>
    @import "@/common/css/common.css";

    .box-title {
        .box-title-content {
            padding-left: 10rpx;
        }
    }

    .box-tag {
        padding: 30rpx;

        .box-tag-date {
            padding-left: 30rpx;
        }
    }

    .box-content {
        padding: 0 30rpx;
        box-sizing: border-box;
    }

    .box-count {
        display: flex;
        align-items: center;
        padding: 100rpx 30rpx;
    }
</style>